{% extends '__base__.html' %}

{% block title %}TV{% endblock %}
{% block content %}
<div class="container">
    <div class="row">
        <video controls class="col-md-10 offset-1"
            style="object-fit: contain;max-height: 65vh;width: 100%;background-color: rgba(17, 27, 27, 0.8);"
            id="player"></video>
    </div>
    <div class="row" id="control">
        <div class="input-group col-md-10 offset-1">
            <input name="m3u8" placeholder="输入播放地址" style="width: 90%;">
            <button class="input-group-prepend input-group-text"><i class="fa fa-play" aria-hidden="true"></i></button>
        </div>
    </div>
</div>
{% endblock %}

{% block beforebody %}
<script>
    document.querySelector('#control button').addEventListener('click', function (event) {
        let url = document.querySelector('#control input').value
        if (url) {
            video(url, '#player')
        }
    }, false)
    function video(url, el) {
        let video = document.querySelector(el)
        // let hls = new Hls();
        // hls.loadSource(url);
        // hls.attachMedia(video);
        /*
        hls.on(Hls.Events.MANIFEST_PARSED, function () {
            video.muted = true
            video.play();
        });
        */
        var Hls = window.Hls
        if (Hls.isSupported()) {
            var hls = new Hls()
            hls.loadSource(url)
            hls.attachMedia(video)
            hls.on(Hls.Events.MANIFEST_PARSED, function () {
                video.play()
            })
        } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
            video.src = url
            video.addEventListener('canplay', function () {
                video.play()
            })
        }
    }
</script>
{% endblock %}